ตารางด้วย div (tableless ตอนที่ 2)
ในตอนนี้ เราจะมาสร้างตารางจาก div แบบ tableless ในแบบที่แต่ละคอลัมน์อาจมีได้มากกว่า 1 บรรทัดกัน (โค้ดตารางในตอนก่อนๆ จะไม่สามารถแสดงผลในลักษณะนี้ได้ถูกต้อง)
เคล็ดลับในการแสดงผลแบบนี้ อยู่ที่การใช้รูปภาพแสดงแทนเส้นกรอบในแนวตั้ง border.gif ที่ต้องวาดเพิ่อให้มีขนาดพอดีกับแต่ละเซล ตามตัวอย่างผมใช้รูปภาพ ขนาด 130px * 10px ที่วาดเส้นกรอบชิดขวามือในแนวตั้งดังรูป
ซึ่งขนาด 130px ได้มาจากขนาดของเซล 110px + padding ซ้าย 10px + padding ขวา 10px
<div id="table">
<p class="first-row"><span class="col1">ทดสอบการตัดคำ และ แถวที่มีความสูงมากกว่า 1 บรรทัด</span><span class="col2">1,2</span><span class="col3">1,3</span></p>
<p><span class="col1">2,1</span><span class="col2">2,2</span><span class="col3">ทดสอบการตัดคำ และ แถวที่มีความสูงมากกว่า 1 บรรทัด</span></p>
</div> #table {
width: 390px;
}
#table p {
clear: both;
float: left;
margin: 0;
border-bottom: 1px solid #e3e7e7;
background-image: url(borders.gif); /* รูปภาพเส้นกรอบในแนวตั้ง */
background-color: #FFF; /* สีพื้นของตาราง */
border-left: 1px solid #e3e7e7;
width: 100%;
}
#table p.first-row {
border-top: 4px solid #e3e7e7; /* เส้นกรอบด้านบน */
}
#table span {
float: left;
padding: 0 10px;
}
#table span.col1 {
width: 110px;
}
#table span.col2 {
width: 110px;
}
#table span.col3 {
width: 110px;
}เคล็ดลับในการแสดงผลแบบนี้ อยู่ที่การใช้รูปภาพแสดงแทนเส้นกรอบในแนวตั้ง border.gif ที่ต้องวาดเพิ่อให้มีขนาดพอดีกับแต่ละเซล ตามตัวอย่างผมใช้รูปภาพ ขนาด 130px * 10px ที่วาดเส้นกรอบชิดขวามือในแนวตั้งดังรูป
ซึ่งขนาด 130px ได้มาจากขนาดของเซล 110px + padding ซ้าย 10px + padding ขวา 10px
ทดสอบการตัดคำ และ แถวที่มีความสูงมากกว่า 1 บรรทัด1,21,3
2,12,2ทดสอบการตัดคำ และ แถวที่มีความสูงมากกว่า 1 บรรทัด